<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>


  
  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link href="css/mc.css" rel="stylesheet" type="text/css">
<script language="JavaScript">
function CambiarFormulario(){
	switch(document.forms[0].tipo.selectedIndex){
		case 0: 
			document.forms[0].razsoc.disabled=true;
			document.forms[0].boton01.disabled=true;
			break;
		case 1: 
			document.forms[0].razsoc.disabled=true;
			document.forms[0].razsoc.value='';
			document.forms[0].boton01.disabled=true;
			break;
		case 2: 
			document.forms[0].razsoc.disabled=false;
			document.forms[0].boton01.disabled=true;
			break;
	}
}
function validarCampos(campo) {
	if(campo.id == 'email'){
		 var re = /^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,3})$/;
				if(campo.value == ''){
					return;
				}
		    	if(!re.exec(campo.value))    {
			    	alert("La dirección de email es incorrecta.");
					  campo.style.color='red';
					  campo.focus();
					  campo.select();
			    }else{
			    	document.getElementById("email").style.color='blue';
			    }
					
	} if(campo.id == 'tel'){
		if(isNaN(campo.value)||campo.value.length < '7'){
			alert("Debe introducir un valor numerico de\n7 o 9 cifras");
			campo.style.color='red';
			campo.focus();
			campo.select();
		}else{
			document.getElementById("tel").style.color='blue';
		}	
	}
}
function activaBoton() {
	var retorno = 0;
	var elementos = document.forms[0].elements.length;
	var obj = document.getElementById("boton01");
	
	if(document.forms[0].tipo.selectedIndex == 1){ 
		for(i=0; i < elementos; i++){
		if(document.forms[0].elements[i].type == 'text' && document.forms[0].elements[i].name != 'razsoc' ){
			if(document.forms[0].elements[i].value != '' ){
				document.forms[0].elements[i].style.backgroundColor = '#91E148';
				retorno ++ ;
			}else{
				document.forms[0].elements[i].style.backgroundColor = '#ff0000';
				document.forms[0].elements[i].style.color = '#ffffff';
				}
			}
		}
		if (retorno == 5){
			obj.disabled = false;
		}
		if (retorno < 5){
		obj.disabled = true;
		}
	}else if(document.forms[0].tipo.selectedIndex == 2){ 
		for(i=0; i < elementos; i++){
		if(document.forms[0].elements[i].type == 'text' ){
			if(document.forms[0].elements[i].value != ''){
				document.forms[0].elements[i].style.backgroundColor = '#91E148';
				retorno ++;
			}else{
				document.forms[0].elements[i].style.backgroundColor = '#ff0000';
				document.forms[0].elements[i].style.color = '#ffffff';
				}
			}
		}
		if (retorno == 6){
			obj.disabled = false;
		}
		if (retorno < 6){
		obj.disabled = true;
		}
	}
	
}

</script>


</head>


<body onload="CambiarFormulario()">

	
	<table>
	
		<tr>
			
			<!--  aqui va el cuerpo -->
			<td class="control" >
			
				<form action="contribuyente.do"  method="post" >
				  			
				  	<input type="hidden" name="operacion" value="insertar" />
				  			
				<table>
					<tr class="titulo" >
						<td colspan="2" align="center" > Registro de  Contribuyentes </td>
					</tr>
					<tr class="control"  >
						<td>Tipo: </td>
						<td> 					
						<select name="tipo" id="tipo" onchange="CambiarFormulario();">
							<option value="" >---Seleccione Tipo---</option>
							<option value="PERSONA NATURAL" > Persona Natural </option>
							<option value="PERSONA JURIDICA" > Persona Juridica </option>
						</select> 
		
						</td>
					</tr>
					<tr class="control" >
						<td>Raz&oacute;n social: </td>
						<td> <input type="text" name="razsoc" size="25" id="razsoc"  maxlength="45" onblur="activaBoton();"> </td>
					</tr>
					<tr class="control" >
						<td>Nombre: </td>
						<td> <input type="text" name="nombre" id="nombre" size="25" maxlength="15" onblur="activaBoton();"> </td>
					</tr>
					<tr class="control" >
						<td>Apellido  Paterno: </td>
						<td> <input type="text" name="apePat" id="apePat" size="10" maxlength="15" onblur="activaBoton();"> </td>
					</tr>
					<tr class="control" >
						<td>Apellido  Materno: </td>
						<td> <input type="text" name="apeMat" id="apeMat" size="10" maxlength="15" onblur="activaBoton();"> </td>
					</tr>
					<tr class="control"  >
						<td>Lugar de residencia: </td>
						<td> 
						<select name="res" >
							<option value="ILO" > ILO </option>
						</select> 
						</td>
					</tr>
					<tr class="control"  >
						<td>Sexo: </td>
						<td> 
			
						<select name="sexo" >
							<option value="M" > Masculino </option>
							<option value="F" > Femenino </option>
						</select> 
						
						 
						</td>
					</tr>
					<tr class="control" >
						<td>Telefono: </td>
						<td> <input type="text" id="tel" name="tel" size="10" maxlength="9" onblur="validarCampos(this);activaBoton();" > </td>
					</tr>
					<tr class="control" >
						<td>E-mail: </td>
						<td> <input type="text" id="email" name="email" size="10"  onblur="validarCampos(this);activaBoton();"> </td>
					</tr>
					<tr class="control" >
						<td colspan="2" align="right"  > 
							<input 
								type="submit" 
								name="boton01"
								id="boton01" 
								value="Registrar" 
								disabled="disabled"> 
						</td>
						<td colspan="2" align="right"  > 
							<a href="contribuyente.do?operacion=listar"><img src="images/btndtsal.JPG"/></a>
						</td>
					</tr>
				</table>
				
				</form>

			</td>
			
			
		</tr>


		
	</table>
	

</body>
</html>